<template>
  <div class="situation-report" ref="contentRef" @scroll="handleScroll">
    <header class="header">
      <!-- <p class="tabs-level">导航层级</p> -->
      <div class="tabs">
        <a-tabs :activeKey="activeTab" @change="changeTab">
          <a-tab-pane :key="TAB_TYPE.GRADE" tab="年级学情"></a-tab-pane>
          <a-tab-pane :key="TAB_TYPE.CLASS" tab="班级学情"></a-tab-pane>
          <a-tab-pane :key="TAB_TYPE.STUDENT" tab="学生学情"></a-tab-pane>
        </a-tabs>
      </div>
    </header>
    <Search ref="searchRef" :active="activeTab" />
    <Content class="main__content" ref="mainRef" :active="activeTab" />
    <aside-tools
      :show-topping="true"
      @topping="topping"
      :show-return="false"
    ></aside-tools>
  </div>
</template>
<script setup>
import { ref, onBeforeUnmount, nextTick } from 'vue'
import AsideTools from '@/components/AsideTools.vue'
import Search from './components/Search.vue'
import Content from './components/Content.vue'
import $bus from '@/utils/tools/bus'
const TAB_TYPE = {
  GRADE: 'grade',
  CLASS: 'class',
  STUDENT: 'student'
}
const contentRef = ref()
const mainRef = ref()
const searchRef = ref()
const tabList = [TAB_TYPE.GRADE, TAB_TYPE.CLASS, TAB_TYPE.STUDENT]
const activeTab = ref('grade')
const changeTab = val => {
  activeTab.value = val
  $bus.emit('change-tab', { from: 'tab' })
}
$bus.on('change-tab', params => {
  if (params.from === 'tab') return
  const active = params.active
  const to = params.to
  if (active) {
    activeTab.value = tabList.includes(active) ? active : TAB_TYPE.GRADE
    if (contentRef.value) {
      // 有指向模块
      if (to) {
        searchRef.value && searchRef.value.changeClass(params.classId)
        nextTick(() => {
          mainRef.value.currentAnchor = `#${to}`
          const item = document.getElementById(to)
          const offset = item?.offsetTop || 0
          contentRef.value &&
            contentRef.value.scrollTo({ top: offset - 90, behavior: 'smooth' })
        })
      } else {
        contentRef.value &&
          contentRef.value.scrollTo({ top: 0, behavior: 'smooth' })
      }
    }
  }
})

// 置顶
const topping = () => {
  contentRef.value && contentRef.value.scrollTo({ top: 0, behavior: 'smooth' })
}

const handleScroll = () => {
  const main = document.getElementsByClassName('main__content')[0]
  const content = main.getElementsByClassName('content')[0]
  const items = content.children
  let st = contentRef.value?.scrollTop
  for (let i = 0; i < items.length; i++) {
    const current = items[i]
    if (st < 300) {
      mainRef.value.activeIndex = 0
      mainRef.value.currentAnchor = `#summary`
      break
    }
    if (Math.abs(st - current.offsetTop) < 200) {
      if (i && mainRef.value) {
        const id = items[i].id
        let flag = 0
        for (let index = 0; index < mainRef.value.getTabs.length; index++) {
          flag = mainRef.value.getTabs[index].children.findIndex(
            item => item.key === id
          )
          if (flag > -1) {
            mainRef.value.currentAnchor = `#${id}`
            mainRef.value.activeIndex = index
            break
          }
        }
      }
    }
  }
}

onBeforeUnmount(async () => {
  $bus.off('change-tab')
})
</script>
<style lang="less" scoped>
@import './style.less';

.situation-report {
  width: 100%;
  height: 97%;
  // padding: 0 240px 30px 240px;
  display: flex;
  flex-direction: column;
  gap: @gap;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 0 !important;
    height: 20px !important;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px !important;
  }

  &::-webkit-scrollbar-track {
    border-radius: 5px !important;
    background: #fffefe00 !important;
  }

  .header {
    background: none;

    .tabs {
      border-radius: @big-radius;
      background: #fff;
      padding: 2px 24px;

      :deep(.ant-tabs-top > .ant-tabs-nav::before) {
        border: none;
      }

      :deep(.ant-tabs-nav) {
        margin: 0;
        height: 64px;
        padding-left: 48px;
        padding-right: 20px;
        margin-right: 76px;
        background: #fff;
        border-radius: 12px;
      }

      :deep(.ant-tabs-tab) {
        color: @secondary-font-color;
      }

      :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
        color: #4d88ff;
      }

      :deep(.ant-tabs-ink-bar) {
        bottom: 10px;
        background-color: #4d88ff;
        width: 24px !important;
        height: 6px;
        margin-left: 20px;
        border-radius: 31px;
      }

      .ant-tabs-ink-bar {
        width: 24px !important;
        height: 6px;
        margin-left: 22px;
        border-radius: 31px;
      }
    }
  }
}
</style>
